<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-24 16:36:43
 * @LastEditTime: 2023-06-29 17:13:24
-->
<script lang="ts" setup name="RootNodeConfig">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { _, ikArray } from 'iking-utils'
import { IkingPicker } from 'iking-web-ui'
import OrgItems from '@main/views/approve-workflow/WorkFlow/OrgItems.vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const showPicker = ref(false)
const { baseUrl } = useHttpUrl()
const token = useToken()

const select = ref(props.config.assignedUser) // computed(() => props.config.assignedUser);
const refOrgPicker = ref(null)
const selectOrg = () => {
  showPicker.value = true
}
const flowStore = useFlowStore()
const handSelected = (sel: any) => {
  select.value = _.cloneDeep(sel.list)
  // 同步基础配置和流程配置发起人信息
  props.config.assignedUser = select.value
  flowStore.design.base.initiators = select.value
  flowStore.design.base.initiatorsName = ikArray.listToString(
    select.value,
    'elementName',
    ', '
  )
}
// const removeOrgItem = (index: number) => {
//   select.value.splice(index, 1);
// };

const submitTypes = [{
  id: true,
  name: '重新开始审批'
}, {
  id: false,
  name: '跳过已审批节点，直接到退回人审批'
}]
</script>

<template>
  <div>
    <div class="flow-draw-desc">
      <b>可提交申请的成员</b>
      <p>模板可见范围内成员可提交申请，修改后模板可见范围将被同步修改</p>
    </div>
    <OrgItems v-model="select" />
    <el-button :icon="Plus" type="primary" @click="selectOrg">添加</el-button>
    <IkingPicker
      ref="refOrgPicker"
      v-model="select"
      v-model:show="showPicker"
      title="请选择可发起审批的人员/部门/角色/岗位"
      multiple
      :api="{
        methods: 'post',
        url: `${baseUrl}/server/component/pick/mix`,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          'Authorization': token,
        },
      }"
      :choose-type="['dep', 'user', 'role']"
      :type-option="{ dep: 'DEPT', user: 'USER', role: 'ROLE', post: 'POST' }"
      :prop-option="{
        name: 'elementName',
        id: 'elementId',
        type: 'elementType',
      }"
      @ok="handSelected"
    />
    <el-form ref="condition-form" label-position="top" label-width="80px">
      <el-form-item label="重新提交时" prop="design.process.reSubmitToBack" class="line-mode">
        <template #label>
          <span class="ikflow-flow-config-label">重新提交时 </span>
        </template>
        <el-radio-group v-model="flowStore.design.process.reSubmitToBack">
          <el-radio
            v-for="(item, index) in submitTypes"
            :key="index"
            :label="item.id"
            size="large"
            class="!block"
          >
            {{ item.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.org-item {
  margin: 5px;
}
</style>
